// 问? 其他的用户人机交互(除了点击了Link标签进行的视图更新切换),还有其他过程需要视图的跟新切换吗?
// 答: 就是交互的过程中,触发了一些条件,这时虽然没有点击Link标签,但也需要进行视图的更新切换
// 能实现目的方式就是,让App组件里面的一些条件一些事件,触发时,去调用history对象的方法:push或replace 都可以切换跟新视图
// 流程1:使用高阶组件的方式,借用withRouter组件为父组件的方式,让App组件能使用history对象上的方法
// 2:在需要的地方使用history的push方法和replace方法
import React from 'react';
import { Route } from 'react-router-dom';
import { withRouter, Switch, NavLink, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Detail from './components/Detail';
import XXX from './components/xxx';

function App(props) {
  console.log(props); /* 官方的组件withRouter,默认的往子组件里面的props添加了一个对象 */
  /* 所以可以在App组件里面使用对象里面的history里的方法来切换视图 */
  return (
    <div>
      App {<h3> &nbsp; 链接: </h3>}
      <NavLink to="/Home">链接:Home</NavLink>
      <> &nbsp; &nbsp;&nbsp;</>
      {/* 用转义符隔开一下,好看点 */}
      <NavLink to="/Detail">链接:Detail</NavLink>
      <> &nbsp;&nbsp;&nbsp; </>
      <NavLink to="/XXX">链接:XXX</NavLink>
      <hr />
      <br />
      <br />
      <br />
      <br />
      {<h3> &nbsp; 编程式导航: </h3>}
      {/* 使用props.history,来改变访问路径 */}
      <button
        onClick={() => {
          props.history.push('/Home', 'Home');
        }}
      >
        按钮:点我展示Home页面
      </button>
      <hr />
      <button
        onClick={() => {
          props.history.push('/Detail', 'Detail');
        }}
      >
        按钮:点我展示Detail页面
      </button>
      <hr />
      <button
        onClick={() => {
          props.history.push('/', 'XXX');
        }}
      >
        按钮:点我展示重定向到"/"
      </button>
      <br />
      <br />
      <br />
      {/* 如下定义路由规则 */}
      <Switch>
        <Redirect from="/" to="/XXX" exact></Redirect>
        <Route path="/XXX" component={XXX}></Route>
        <Route path="/Home" component={Home}></Route>
        <Route path="/Detail" component={Detail}></Route>
      </Switch>
    </div>
  );
}

const withApp = withRouter(App);
export default withApp;
